<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-blue-light" :isBack="true"  backText="返回" title="我的课程"></cu-custom>
		<view class="bg-blue-light" style="height: 150rpx;border-radius: 0 0 50rpx 50rpx;">
		</view>
		<view class="cu-card article" style="margin-top: -140rpx;">
			<view class="cu-item bg-white shadow" style="border-radius: 14rpx;padding: 30rpx 0 0 0;">
				<zh-calendar @selected-change="selectedChange" @days-change="daysChange"  :selectList="selectList"></zh-calendar>
			</view>
		</view>
		<view class="cu-card article " v-for="(item, index) in list" :key="index" >
			<view class="cu-item bg-white shadow" style="border-radius: 14rpx;">
				<view style="padding: 30rpx 40rpx 30rpx 40rpx;" @tap="gotoSignIn(item)">
					<view class="flex justify-start align-center" style="min-height: 60rpx;line-height: 50rpx;">
						<view class="bg-blue text-center" style="border-radius: 10rpx 0 10rpx 0;width: 80rpx; margin-right: 30rpx;">
							课程
						</view>
						<view class="text-xl text-bold " style="width: 500rpx;">
							{{item.curriculumName}}
						</view>
					</view>
					<view class="flex justify-between align-center">
						<view class="flex justify-start align-center">
							<view  style="width: 140rpx;"><text class="text-gray" >上课时间：</text></view>
							<view ><text class="text-gray">{{item.begTimeText}}-{{item.endTimeText}}</text></view>
						</view>
						<view>
						<view v-if="item.personStatus=='not_start'||item.personStatus=='finish'" class='cu-tag round bg-grey'>{{item.personStatusName}}</view>
						<view v-else-if ="item.personStatus=='ing'" class='cu-tag round bg-green'>{{item.personStatusName}}</view>
						<view v-else-if="item.personStatus=='sign_in'||item.personStatus=='sign_out'" class='cu-tag round bg-blue'>{{item.personStatusName}}</view>
						<view v-else class='cu-tag round bg-red'>{{item.personStatusName}}</view>
						</view>
					</view>
					<view class="flex justify-start align-center" >
						<view class="text-left" style="width: 140rpx;">
							<text class="text-gray" >上课地点：</text>
						</view>
						<view style="width: 470rpx;">
							<text class="text-gray">
							{{item.address}}{{item.addressDetail}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length===0" class="text-center" style="padding: 200rpx 0 40rpx 0;">
			<view class="iconfont icon-meiyoushuju text-gray" style="font-size: 150rpx;"></view>
			<view class="text-gray">没有课程</view>
		</view>
		<view class="flex flex-direction" style="padding: 20rpx">
			<button style="width: 100%;height: 100rpx;" class="cu-btn shadow margin-tb-sm lg bg-gradual-blue-light"  @tap="openHistory">培训记录</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/society/train/myTrain.js';
	import miment from 'miment'
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				list:[],
				selectList:[]
			}
		},
		onReady(){
			
		},
		methods: {
			selectedChange(e){
				this.getList(e.fullDate)
			},
			getList(date){
				const data ={}
				data.date=date?date:miment().format('YYYY-MM-DD');
				this.$http.post(api.getSelectDetailByDay, data).then(res => {
					this.list= res.result
				}).catch(error => {	
				})
			},
			daysChange(e){
				this.getSelected(e)
				this.list=[]
			},
			getSelected(e){
				const data = {}
				data.begQueryTime=miment(e.start).format('YYYYMMDD')
				data.endQueryTime=miment(e.end).format('YYYYMMDD')
				console.log(data)
				this.$http.post(api.getSelectByDays, data).then(res => {
					this.selectList= res.result
				}).catch(error => {	
				})
			},
			gotoSignIn(item){
				console.log(item)
				const params = {}
				params.trainCurriculumId=item.trainCurriculumId
				this.$Router.push({ name:'trainSignIn',params:params})
			},
			openHistory(){
				const params = {}
				this.$Router.push({ name:'trainHistory',params:params})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
